<template>
	<view class="dateTools">
		<view class="dateBox br-2" :class="[`${theme}-bg-hbox`,`${theme}-ftext-color`]">
			<view class="title">
				<text>{{$t('DateTool.Calculatethedatedifference')}}</text>
			</view>
			<view class="date" @click="$refs.calendar1.open()">
				<view class="icon">
					<image src="../../../../static/images/icons/riqi.png"></image>
				</view>
				<view class="text">
					<text>{{!date1?$t('DateTool.Startdate'):date1}}</text>
				</view>
			</view>
			<view class="date" @click="$refs.calendar2.open()">
				<view class="icon">
					<image src="../../../../static/images/icons/riqi.png" mode=""></image>
				</view>
				<view class="text">
					<text>{{!date2?$t('DateTool.Enddate'):date2}}</text>
				</view>
			</view>
			<view class="text">
				<view>

				</view>
				<text v-if="isShow">{{`${$t('DateTool.Calculationresultdifference')} ${num}`}}</text>
			</view>
		</view>

		<view class="dateBox br-2" style="margin-top: 40rpx;" :class="[`${theme}-bg-hbox`,`${theme}-ftext-color`]">
			<view class="title">
				<text>计算日期</text>
			</view>
			<view class="date" @click="$refs.calendar3.open()">
				<view class="icon">
					<image src="../../../../static/images/icons/riqi.png"></image>
				</view>
				<view class="text">
					<text>{{!date3?$t('DateTool.Startdate'):date3}}</text>
				</view>
			</view>
			<view class="date" @click="">
				<view class="icon">
					<image src="../../../../static/images/icons/riqi.png" mode=""></image>
				</view>
				<view class="input">
					<uni-easyinput :placeholder="$t('DateTool.Enterthenumberofdaysbetween')" type="number" maxlength="3"
						:inputBorder="false" @input="input">
					</uni-easyinput>
				</view>

			</view>
			<view class="text">
				<view>

				</view>
				<text v-if="isShows">{{`${nub} ${$t('DateTool.Divais')}：${text}`}}</text>
			</view>
		</view>

		<uni-calendar ref="calendar1" start-date="1900-01-01" end-date="3000-12-31" :insert="false"
			@confirm="confirm1" />
		<uni-calendar ref="calendar2" start-date="1900-01-01" end-date="3000-12-31" :insert="false"
			@confirm="confirm2" />
		<uni-calendar ref="calendar3" start-date="1900-01-01" end-date="3000-12-31" :insert="false"
			@confirm="confirm3" />
	</view>
</template>

<script>
	export default {
		name: 'dateTools',
		data() {
			return {
				date1: '',
				date2: '',
				date3: '',
				num: '',
				nub: '',
				text: '',
				isShow: false,
				isShows: false,
			}
		},
		methods: {
			confirm1(e) {
				console.log(new Date(e.fulldate).getTime(), new Date().getTime())
				this.date1 = e.fulldate
				this.see()
			},
			confirm2(e) {
				this.date2 = e.fulldate
				this.see()
			},
			confirm3(e) {
				this.date3 = e.fulldate
				this.gee()
			},
			see() {
				if (!new Date(this.date1).getTime() || !new Date(this.date2).getTime()) {
					this.isShow = false
					return
				}
				this.isShow = true

				if (this.date1 > this.date2) {
					this.num = (new Date(this.date1).getTime() - new Date(this.date2).getTime()) / (1000 * 60 * 60 * 24)
				} else {
					this.num = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (1000 * 60 * 60 * 24)
				}
			},
			gee() {
				if (!this.nub || !this.date3) {
					this.isShows = false
					return
				}
				this.isShows = true

				let date1 = new Date(this.date3)

				let time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate() //time1表示当前时间

				let date2 = new Date(date1)

				date2.setDate(date1.getDate() + this.nub)

				let month = (date2.getMonth() + 1) < 10 ? '0' + (date2.getMonth() + 1) : (date2.getMonth() + 1)

				let day = date2.getDate() < 10 ? '0' + date2.getDate() : date2.getDate()

				let time2 = date2.getFullYear() + "-" + month + "-" + day

				this.text = time2
			},
			input(e) {
				this.nub = Number(e)
				this.gee()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dateTools {
		height: 100%;
		padding: 40rpx;
		box-sizing: border-box;

		.dateBox {
			padding: 40rpx 40rpx 0 40rpx;
			height: 340rpx;

			.title {
				font-size: 34rpx;
				font-weight: 600;
			}

			.date {
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				cursor: pointer;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}

				.input {
					width: 100%;
				}
			}

			.text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;

				text {
					cursor: pointer;
				}
			}
		}
	}
</style>
